<template>
  <div>
     <div class="zixun-concent">
        <div class="zixun-title">
        <div style="display: flex;justify-content:center;flex-direction:column;">
          <div style="font-weight: bold;font-size: 1.2rem;color: #333;" @click="getNews">福利</div>
          <div class="xuanzhongdian"></div>
        </div>
         <van-field   @click="getsearch()"  left-icon="search" v-model="value"  placeholder="请输入关键词搜素" style="width:17.4375rem;border-radius:1.0625rem;background-color:#7B7D8014;height:1.875rem;line-height:0.875rem;" />
       </div>
       <div class="biaqians">
        <!-- <div style="display: flex;flex-direction:column;align-items:center;" @click="golibao()">
            <img src="~/static/fuli/fuli1.png" alt="" style="width:2.5rem;height:2.5rem;">
            <div>游戏礼包</div>
        </div> -->
       <div style="display: flex;flex-direction:column;align-items:center;" @click="gofanli()">
            <img src="~/static/fuli/fuli2.png" alt="" style="width:2.5rem;height:2.5rem;">
            <div>返利申请</div>
        </div>
       <div style="display: flex;flex-direction:column;align-items:center;" @click="goqiandao()">
            <img src="~/static/fuli/fuli3.png" alt="" style="width:2.5rem;height:2.5rem;">
            <div>签到</div>
        </div>
       </div>
         <div style="">
  <van-tabs type="line" background="#F7F8FA" line-width="55"  style="font-weight:bold;margin-bottom: 8px;">
    <!-- <van-tab title="每日任务">
     <div style="background: #FFFFFF;border-radius: .75rem;margin-top: 1.375rem;padding: .75rem;">
        <div style="font-weight: bold;font-size: .875rem;color: #1A1A1A;">做任务兑换奖励</div>
        <div style="display:flex;align-items:center;margin-top:1.6875rem;justify-content:space-between;">
            <div style="display:flex;align-items:center;">
                <img src="~/static/fuli/fuli4(1).png" alt="" style="width:2rem;height:2rem;">
                <div style="margin-left:.65rem;">
            <div style="font-size:.875rem;font-weight: 500;color: #17181A;"> 每日签到</div>
             <div style="display:flex;align-items:center;">
                <img src="~/static/fuli/fuli4(6).png" alt="" style="width:1.125rem;height:1.125rem;">
                 <div style="font-size:.875rem;font-weight: 500;color: #FFA800FF;"> +1积分</div>
            </div>
                </div>
            </div>
            <div class="qiandao">签到</div>
        </div>
            <div style="display:flex;align-items:center;margin-top:1.6875rem;justify-content:space-between;">
            <div style="display:flex;align-items:center;">
                <img src="~/static/fuli/fuli4(5).png" alt="" style="width:2rem;height:2rem;">
                <div style="margin-left:.65rem;">
            <div style="font-size:.875rem;font-weight: 500;color: #17181A;"> 积分抽奖</div>
             <div style="display:flex;align-items:center;">
                <img src="~/static/fuli/fuli4(6).png" alt="" style="width:1.125rem;height:1.125rem;">
                 <div style="font-size:.875rem;font-weight: 500;color: #FFA800FF;"> +10积分</div>
            </div>
                </div>
            </div>
            <div class="qiandao">去完成</div>
        </div>
            <div style="display:flex;align-items:center;margin-top:1.6875rem;justify-content:space-between;">
            <div style="display:flex;align-items:center;">
                <img src="~/static/fuli/fuli4(4).png" alt="" style="width:2rem;height:2rem;">
                <div style="margin-left:.65rem;">
            <div style="font-size:.875rem;font-weight: 500;color: #17181A;"> 登录游戏</div>
             <div style="display:flex;align-items:center;">
                <img src="~/static/fuli/fuli4(6).png" alt="" style="width:1.125rem;height:1.125rem;">
                 <div style="font-size:.875rem;font-weight: 500;color: #FFA800FF;"> +10积分</div>
            </div>
                </div>
            </div>
            <div class="qiandao">去完成</div>
        </div>
            <div style="display:flex;align-items:center;margin-top:1.6875rem;justify-content:space-between;">
            <div style="display:flex;align-items:center;">
                <img src="~/static/fuli/fuli4(2).png" alt="" style="width:2rem;height:2rem;">
                <div style="margin-left:.65rem;">
            <div style="font-size:.875rem;font-weight: 500;color: #17181A;"> 每日首充</div>
             <div style="display:flex;align-items:center;">
                <img src="~/static/fuli/fuli4(6).png" alt="" style="width:1.125rem;height:1.125rem;">
                 <div style="font-size:.875rem;font-weight: 500;color: #FFA800FF;"> +10积分</div>
            </div>
                </div>
            </div>
            <div class="qiandao">去完成</div>
        </div>
            <div style="display:flex;align-items:center;margin-top:1.6875rem;justify-content:space-between;">
            <div style="display:flex;align-items:center;">
                <img src="~/static/fuli/fuli4(3).png" alt="" style="width:2rem;height:2rem;">
                <div style="margin-left:.65rem;">
            <div style="font-size:.875rem;font-weight: 500;color: #17181A;"> 邀请好友</div>
             <div style="display:flex;align-items:center;">
                <img src="~/static/fuli/fuli4(6).png" alt="" style="width:1.125rem;height:1.125rem;">
                 <div style="font-size:.875rem;font-weight: 500;color: #FFA800FF;"> +100积分</div>
            </div>
                </div>
            </div>
            <div class="qiandao">去完成</div>
        </div>
     </div>
        <div style="background: #FFFFFF;border-radius: .75rem;margin-top: 1.375rem;padding: .75rem;margin-bottom:3.375rem;">
        <div style="font-weight: bold;font-size: .875rem;color: #1A1A1A;">新用户任务</div>
        <div style="display:flex;align-items:center;margin-top:1.6875rem;justify-content:space-between;">
            <div style="display:flex;align-items:center;">
                <img src="~/static/fuli/fuli5(8).png" alt="" style="width:2rem;height:2rem;">
                <div style="margin-left:.65rem;">
            <div style="font-size:.875rem;font-weight: 500;color: #17181A;"> 设置头像</div>
             <div style="display:flex;align-items:center;">
                <img src="~/static/fuli/fuli4(6).png" alt="" style="width:1.125rem;height:1.125rem;">
                 <div style="font-size:.875rem;font-weight: 500;color: #FFA800FF;"> +1积分</div>
            </div>
                </div>
            </div>
            <div class="qiandao">去完成</div>
        </div>
            <div style="display:flex;align-items:center;margin-top:1.6875rem;justify-content:space-between;">
            <div style="display:flex;align-items:center;">
                <img src="~/static/fuli/fuli5(6).png" alt="" style="width:2rem;height:2rem;">
                <div style="margin-left:.65rem;">
            <div style="font-size:.875rem;font-weight: 500;color: #17181A;"> 设置昵称</div>
             <div style="display:flex;align-items:center;">
                <img src="~/static/fuli/fuli4(6).png" alt="" style="width:1.125rem;height:1.125rem;">
                 <div style="font-size:.875rem;font-weight: 500;color: #FFA800FF;"> +1积分</div>
            </div>
                </div>
            </div>
            <div class="qiandao">去完成</div>
        </div>
            <div style="display:flex;align-items:center;margin-top:1.6875rem;justify-content:space-between;">
            <div style="display:flex;align-items:center;">
                <img src="~/static/fuli/fuli5(5).png" alt="" style="width:2rem;height:2rem;">
                <div style="margin-left:.65rem;">
            <div style="font-size:.875rem;font-weight: 500;color: #17181A;"> 完善信息</div>
             <div style="display:flex;align-items:center;">
                <img src="~/static/fuli/fuli4(6).png" alt="" style="width:1.125rem;height:1.125rem;">
                 <div style="font-size:.875rem;font-weight: 500;color: #FFA800FF;"> +10积分</div>
            </div>
                </div>
            </div>
            <div class="qiandao">去完成</div>
        </div>
            <div style="display:flex;align-items:center;margin-top:1.6875rem;justify-content:space-between;">
            <div style="display:flex;align-items:center;">
                <img src="~/static/fuli/fuli5(7).png" alt="" style="width:2rem;height:2rem;">
                <div style="margin-left:.65rem;">
            <div style="font-size:.875rem;font-weight: 500;color: #17181A;"> 实名认证</div>
             <div style="display:flex;align-items:center;">
                <img src="~/static/fuli/fuli4(6).png" alt="" style="width:1.125rem;height:1.125rem;">
                 <div style="font-size:.875rem;font-weight: 500;color: #FFA800FF;"> +10积分</div>
            </div>
                </div>
            </div>
            <div class="qiandao">去完成</div>
        </div>
            <div style="display:flex;align-items:center;margin-top:1.6875rem;justify-content:space-between;">
            <div style="display:flex;align-items:center;">
                <img src="~/static/fuli/fuli5(4).png" alt="" style="width:2rem;height:2rem;">
                <div style="margin-left:.65rem;">
            <div style="font-size:.875rem;font-weight: 500;color: #17181A;"> 绑定手机</div>
             <div style="display:flex;align-items:center;">
                <img src="~/static/fuli/fuli4(6).png" alt="" style="width:1.125rem;height:1.125rem;">
                 <div style="font-size:.875rem;font-weight: 500;color: #FFA800FF;"> +10积分</div>
            </div>
                </div>
            </div>
            <div class="qiandao">去完成</div>
        </div>
     </div>
  </van-tab> -->
  <!-- <van-tab title="成长之路">
       <van-list
  v-model="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
  
>
  <van-cell v-for="(item,index) in list2" :key="index"  style="border-radius:.75rem;margin-bottom:.75rem;">
   <div style="display: flex;align-items:center;justify-content:space-between;">
    <div>
            <div style="display: flex;align-items:center;">
        <div style="font-weight: bold;font-size: .875rem;color: #2E3033;">累计消费100元</div>
            <div style="display:flex;align-items:center;margin-left:.625rem;">
                <img src="~/static/fuli/fuli4(6).png" alt="" style="width:1.125rem;height:1.125rem;">
                 <div style="font-size:.875rem;font-weight: 500;color: #FFA800FF;"> +100积分</div>
            </div>
    </div>
         <div style="color:#666666FF;font-size: 12px;">游戏中实际消费达到100元，即可达成</div>
    </div>
     <div class="qiandao">已完成</div>
   </div>
  </van-cell>
</van-list>
  </van-tab> -->
  <van-tab title="平台活动" >
    <van-list
  v-model="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
  
>
  <van-cell v-for="(item,index) in list" :key="index"  style="border-radius:.75rem;margin-top:.75rem;" @click="goxianqg(item.id)">
    <div style="color: #2E3033;font-size: .9375rem;font-weight: bold;">{{ item.title }}</div>
    <div style="color: #2E3033;font-size: .9375rem;font-size: 11px;color: #808080;white-space: nowrap; overflow: hidden;text-overflow: ellipsis;width: 200px;">{{ item.time }}</div>
      
       <div style="position: relative;">
        <img  :src="item.image" alt="" style="height:9.375rem;width:100%;border-radius:.75rem;">
        <div style="position: absolute;top: 0;right: 0;width: 49px;height: 20px;background: #FF7700;border-radius: 0px 8px 0px 8px;font-size: 11px;line-height: 20px;text-align: center;color: #FFFFFF;">{{ item.type }}</div>
      </div>
       <div style="display: flex;align-items:center;margin-top:.225rem;justify-content:space-between;">
        <div>
            <!-- <div style="display:flex;align-items:center;">
                  <div style="font-weight: 500;color: #7B7D80;font-size: .6875rem;" v-for="(items,indexs) in biaoqians" :key="indexs">{{items}}</div>
            </div> -->
        </div>
        <!-- <div style="color:#FF7500;">
        <div style="font-size:.8125rem;font-weight:bold;">77TOP</div>
        <div style="font-family: modeng">5.0</div>
    </div> -->
       </div>
             <!-- <div  style="border-radius: .25rem;background-color:#FF750014;color:#FF7500FF;font-size:.75rem;padding:.25rem .875rem;margin-top:.5rem;">此游戏极易上瘾 切勿贪玩 入坑难出</div> -->
  </van-cell>
</van-list>
  </van-tab>
</van-tabs>
         </div>
             
     </div>
     <BottomTab  :types=3 />
     </div>
</template>

<script>
  import BottomTab from '~/components/footer.vue';
export default {
  components: {
    BottomTab
  },
  data() {
    return{
          active: 2,
          list: [],
          list2:[],
           loading: false,  
          finished: false,
          value: '',
          biaoqians: ['返利申请', '签到']
          
    }
  },
  async  mounted(){
    const params = {
      ct: 'app',
      ac: 'huodong',
      member_id: '',
      language:0
    };
      const response = await this.$axios.get('api/app/v3', { params });
     this.list = response.data.data
  },
  methods: {
    golibao(){
          window.location.href = `${this.$domain}/m/lb/`;
    },
    gofanli(){
      window.location.href = `${this.$domain}?ct=wap&ac=fanli`;
    },
    goqiandao(){
      window.location.href = `${this.$domain}?ct=wap&ac=signs`;
    },
    getsearch(){
  window.location.href = `${this.$domain}/m/index/search.php`;
},
   goxianqg(e){
    this.$router.push({
    path: `/news/${e}.html`,
  });
    // window.location.href = `${this.$domain}/?ct=aznews&ac=info&az=1&id=${e}`;
   },
    getNews() {
      this.list = [];
      this.loading = true;
      this.finished = false;
      this.value = '';
    },
      onLoad() {
      //   setTimeout(() => {
      //   if (this.page <= this.list.max_p) {
      //     this.page++;
      //     this.zhutilist();
      //   } else {
      //     this.finished = true;
      //   }
      // }, 500);
    },
  }
}
</script>
<style>
   body {
  background: #F7F8FA !important;
  font-size: 16px; /* 默认字体大小 */
   }</style>
<style scoped>
 .zixun-concent{
      margin: .9375rem;
  }
  .zixun-title{
    display: flex;
    align-content: center;
    justify-content: space-between;
  }
    .xuanzhongdian {
  width: .375rem;
  height: .375rem;
  background: #ff7500;
  box-shadow: .0625rem .0625rem .1875rem 0rem rgba(242, 120, 16, 0.32);
  border-radius: 50%;
  margin: .125rem auto; /* Simplify border-radius */
}
.biaqians{
height: 6.75rem;
background: #FFFFFF;
border-radius: .75rem;
margin-top: 1.375rem;
display: flex;
align-items: center;
justify-content: space-around;

}
/deep/.van-tab--active{
    font-weight: bold;
}
/deep/.van-tabs__line {
    position: absolute;
    bottom: 1.5em;
    left: 0;
    z-index: 1;
    width: 2.5rem;
    height: .1875rem;
   background: #2E3033;
    border-radius: .1875rem;
}
.qiandao{
width: 3.5rem;
height: 1.5rem;
line-height: 1.5rem;
text-align: center;
border-radius: 4.25rem;
border: .0625rem solid #F27810;
color: #F27810FF;
font-size: .75rem;
}
/deep/.van-tabs--line .van-tabs__wrap {
    height: 44px;
    float: left;
}
</style>